<template>
  <div id="app-toolbox-xmap" v-if="store.loaded">
    <div class="app-toolbox-xmap__navbar-wrapper">
      <xmap-navbar :store="store"></xmap-navbar>
    </div>
    <div class="app-toolbox-xmap__center-wrapper">
      <xmap-kity :me="topic" :store="store" :key="store.topic.mid"></xmap-kity>
      <xmap-kity v-for="module in modules" :me="module" :store="store" :key="module.state.mid"></xmap-kity>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue';
  import XmapNavbar from './xmap/navbar';
  import XmapKity from './xmap/kity';

  export default {
    name: 'app-toolbox-xmap',
    components: {
      XmapNavbar,
      XmapKity,
    },
    data() {
      return {
        store: {
          topic: {},
          modules: {},
          state: {
            midLen: 0,
            topicLen: 0,
            moduleLen: 0,
          },
          current: {
            mid: -1,
            input: {
              name: '',
              synopsis: '',
            },
          },
          dialog: {
            title: '',
            visible: false,
          },
          tomatoDialog: {
            visible: false,
            type: 'create', // ['create', 'info', 'quit']
          },
          loadingDialog: {
            visible: false,
          },
          loaded: false,
        },
      };
    },
    computed: {
      topic() {
        return this.store.topic;
      },
      modules() {
        return this.store.modules;
      },
    },
    created() {
      const id = this.$route.params.id;
      this.init(id);
    },
    methods: {
      getTopic(id) {
        const target = `api/topics/${id}`;
        return this.$http.request({
          url: target,
          method: 'get',
        });
      },
      getTopicModules(id) {
        const target = `api/topics/${id}/modules`;
        return this.$http.request({
          url: target,
          method: 'get',
        });
      },
      init(id) {
        this.$http.all([this.getTopic(id), this.getTopicModules(id)])
          .then(this.$http.spread((rTopic, rTopicModules) => {
            const topic = rTopic.data;
            topic.modules = rTopicModules.data;
            this.initKity(topic);
          })).catch(() => {
          });
      },
      initKity(topic) {
        let mid = 0;
        Vue.set(this.store.topic, 'id', topic.id);
        Vue.set(this.store.topic, 'name', topic.name);
        Vue.set(this.store.topic, 'synopsis', topic.synopsis);
        Vue.set(this.store.topic, 'createTime', topic.createTime);
        Vue.set(this.store.topic, 'updateTime', topic.updateTime);
        Vue.set(this.store.topic, 'tomatoAmount', topic.tomatoAmount);
        Vue.set(this.store.topic, 'todayTomatoAmount', topic.todayTomatoAmount);
        Vue.set(this.store.topic, 'payload', '');
        Vue.set(this.store.topic, 'state', {});
        Vue.set(this.store.topic.state, 'mid', mid);
        Vue.set(this.store.topic.state, 'timer', null);
        Vue.set(this.store.topic.state, 'synchronize', 'success');
        Vue.set(this.store.topic.state, 'enabled', {});
        Vue.set(this.store.topic.state.enabled, 'insert', false);
        Vue.set(this.store.topic.state.enabled, 'update', false);
        Vue.set(this.store.topic.state.enabled, 'show', true);
        Vue.set(this.store.topic.state, 'init', false);
        Vue.set(this.store.topic.state, 'type', 'topic');
        this.store.current.mid = 0;
        this.store.state.midLen += 1;
        this.store.state.topicLen += 1;
        Object.values(topic.modules).forEach((item, index) => {
          mid += 1;
          Vue.set(this.store.modules, index, {});
          Vue.set(this.store.modules[index], 'id', item.id);
          Vue.set(this.store.modules[index], 'name', item.name);
          Vue.set(this.store.modules[index], 'synopsis', item.synopsis);
          Vue.set(this.store.modules[index], 'createTime', item.createTime);
          Vue.set(this.store.modules[index], 'updateTime', item.updateTime);
          Vue.set(this.store.modules[index], 'tomatoAmount', item.tomatoAmount);
          Vue.set(this.store.modules[index], 'todayTomatoAmount', item.todayTomatoAmount);
          Vue.set(this.store.modules[index], 'payload', '');
          Vue.set(this.store.modules[index], 'state', {});
          Vue.set(this.store.modules[index].state, 'mid', mid);
          Vue.set(this.store.topic.state, 'timer', null);
          Vue.set(this.store.modules[index].state, 'synchronize', 'success');
          Vue.set(this.store.modules[index].state, 'enabled', {});
          Vue.set(this.store.modules[index].state.enabled, 'show', false);
          Vue.set(this.store.modules[index].state.enabled, 'insert', false);
          Vue.set(this.store.modules[index].state.enabled, 'update', false);
          Vue.set(this.store.modules[index].state, 'init', false);
          Vue.set(this.store.modules[index].state, 'type', 'module');
          this.store.state.midLen += 1;
          this.store.state.moduleLen += 1;
        });
        this.store.loaded = true;
      },
    },
  };
</script>